<template>
    <div :class="clazz">
        <el-button :disabled="disabled"  :size="size" >
            <slot></slot>
        </el-button>
    </div>
</template>

<script>

export default{

    data(){


        return{
            clazz:'btn-deep-default'

        }
    },
    props:{
        level:{
            type:String,
            default:'btn-deep-default'
        },
        disabled:{
            type:Boolean,
            default:false
        },
        size:{
            type:String,
            default:'default'
        }
    },
    created(){
        switch(this.level){
            case 'default':
                this.clazz = 'btn-deep-default'
                break;
            case 'info':
                this.clazz = 'btn-deep-info'
                break;
        }
    }
}

</script>

<style scoped>
.btn-deep-info>>>button{
    border-radius: 0;
    background-color: #FF6900;
    color: #fff;
    font-weight: 600;
    letter-spacing: 2px;
    width: auto;
  
}
.btn-deep-default>>>button{
    border-radius: 0;
    background-color: #fff;
    color: #999;
    font-weight: 400;
    letter-spacing: 2px;
}

.btn-deep-info>>>button[disabled]{
    background-color: #FF6900 !important;
    color: #fff;
}

.btn-deep-default>>>button[disabled]{
    
    background-color: #fff !important;
    color: #999 !important;
   
}

</style>